<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/public/static/h-ui/css/H-ui.min.css" />
    {block name="resources"/}{/block}
</head>
<body>
<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="">
        <input type="hidden" value="{$order_id}" id="order_id">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>收货人：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$res['receiver_name']}" placeholder="收货人" class="input-text" id="receiver_name" name="receiver_name">
                <p class="error">请输入收货人</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>收货人手机号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$res['receiver_mobile']}" placeholder="收货人手机号" class="input-text" id="receiver_mobile" name="receiver_mobile">
                <p class="error">请输入收货人手机号</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">收货人邮编：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$res['receiver_zip']}" class="input-text" placeholder="收货人邮编" id="receiver_zip">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>收货人地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width: auto">
                  <select class="select" size="1" name="province" id="seleAreaNext" onchange="GetProvince();getSelCity();">
                  </select>
                </span>
                <span class="select-box" style="width: auto">
                  <select class="select" size="1" name="city" id="seleAreaThird" onchange="getSelCity();">
                    <option value="-1">请选择市</option>
                     <option selected = "selected" value="{$address_id['city_id']}">{$address_id['city_name']}</option>
                  </select>
                </span>
                <span class="select-box" style="width: auto">
                  <select class="select" size="1" name="district" id="seleAreaFouth">
                     <option value="-1">请选择区/县</option>
                       <option selected = "selected" value="{$address_id['district_id']}">{$address_id['district_name']}</option>
                  </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>详细地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" autocomplete="off" value="{$res['receiver_address']}" class="input-text" placeholder="详细地址" id="address">
                <p class="error">请输入详细地址</p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" onclick="updateAddressSubmit()" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>
<script type="text/javascript" src="/public/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/public/static/layer/2.4/layer.js"></script>
<script>
    $(function () {
        var selCity = $("#seleAreaNext")[0];
        for (var i = selCity.length - 1; i >= 0; i--) {
            selCity.options[i] = null;
        }
        var opt = new Option("{$address_id['province_name']}", "{$address_id['province_id']}");
        selCity.options.add(opt);
        // 添加省
        $.ajax({
            type : "post",
            url : "{:url('order/getprovince')}",
            dataType : "json",
            success : function(data) {
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var opt = new Option(data[i].name,data[i].id);
                        selCity.options.add(opt);
                    }
                    if(typeof($("#provinceid").val())!='undefined'){
                        $("#seleAreaNext").val($("#provinceid").val());
                        GetProvince();
                        $("#provinceid").val('-1');
                    }
                }
            }
        });
    })
    //选择省份弹出市区
    function GetProvince() {
        var id = $("#seleAreaNext").find("option:selected").val();
        var selCity = $("#seleAreaThird")[0];
        for (var i = selCity.length - 1; i >= 0; i--) {
            selCity.options[i] = null;
        }
        var opt = new Option("请选择市", "-1");
        selCity.options.add(opt);
        $.ajax({
            type : "post",
            url : "{:url('order/getcity')}",
            dataType : "json",
            data : {
                "province_id" : id
            },
            success : function(data) {
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var opt = new Option(data[i].name,data[i].id);
                        selCity.options.add(opt);
                    }
                    if(typeof($("#cityid").val())!='undefined'){
                        $("#seleAreaThird").val($("#cityid").val());
                        getSelCity();
                        $("#cityid").val('-1');
                    }
                }
            }
        });
    };
    // 选择市区弹出区域
    function getSelCity() {
        var id = $("#seleAreaThird").find("option:selected").val();
        var selArea = $("#seleAreaFouth")[0];
        for (var i = selArea.length - 1; i >= 0; i--) {
            selArea.options[i] = null;
        }
        var opt = new Option("请选择区/县", "-1");
        selArea.options.add(opt);
        $.ajax({
            type : "post",
            url : "{:url('order/getdistrict')}",
            dataType : "json",
            data : {
                "city_id" : id
            },
            success : function(data) {
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var opt = new Option(data[i].name,data[i].id);
                        selArea.options.add(opt);
                    }
                    if(typeof($("#districtid").val())!='undefined'){
                        $("#seleAreaFouth").val($("#districtid").val());
                        $("#districtid").val('-1');
                    }
                }
            }
        });
    }
    //提交修改的收货地址
    function updateAddressSubmit(){
        var receiver_name = $("#receiver_name").val();
        var receiver_mobile = $("#receiver_mobile").val();
        var receiver_zip = $("#receiver_zip").val();
        var seleAreaNext = $("#seleAreaNext").val();
        var seleAreaThird = $("#seleAreaThird").val();
        var seleAreaFouth = $("#seleAreaFouth").val();
        var address_detail = $("#address").val();
        var order_id = $("#order_id").val();
        if(receiver_name == ''){
            layer.msg("请填写收货人姓名", {icon: 2, time: 1000});
            $("#receiver_name").focus();
            return false;
        }
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(receiver_mobile))){
            layer.msg("请填写正确格式的手机号", {icon: 2, time: 1000});
            $("#receiver_mobile").focus();
            return false;
        }
        if(seleAreaNext == '-1'){
            layer.msg("请选择省", {icon: 2, time: 1000});
            return false;
        }
        if(seleAreaThird == '-1'){
            layer.msg("请选择市", {icon: 2, time: 1000});
            return false;
        }
        if($("#seleAreaFouth option").length>1){
            if(seleAreaFouth == '-1'){
                layer.msg("请选择区/县", {icon: 2, time: 1000});
                return false;
            }
        }
        if(address_detail == ''){
            layer.msg("请填写详细收货地址", {icon: 2, time: 1000});
            return false;
        }
        $.ajax({
            type : 'post',
            url : "{:url('order/updateOrderAddress')}",
            data : {
                "order_id" : order_id,
                "receiver_name" : receiver_name,
                "receiver_mobile" : receiver_mobile,
                "receiver_zip" : receiver_zip,
                "seleAreaNext" : seleAreaNext,
                "seleAreaThird" : seleAreaThird,
                "seleAreaFouth" : seleAreaFouth,
                "address_detail" : address_detail
            },
            success : function(data){
                if (data > 0) {
                    layer.msg('修改收货地址成功', {icon: 1, time: 1000},function () {
                        window.parent.location.reload();
                    });
                }else{
                    layer.msg('修改收货地址失败', {icon: 2, time: 1000});
                }
            }
        });
    }
</script>
</body>
</html>